const containers = document.getElementsByClassName("card");
const elements = [];
const maxChangeValue = 60; // 变化幅度最大值
const speed = 2; // 每秒变化量（rem）
const baseFontSize = parseFloat(
  getComputedStyle(document.documentElement).fontSize
);
let lastTime = 0;
const originalPositions = [
  { top: "-10%", left: "60%" },
  { top: "80%", left: "-8rem" },
];

for (let i = 0; i < 2; i++) {
  const element = document.createElement("div");
  element.classList.add("circle");
  element.style.top = originalPositions[i].top ? originalPositions[i].top : "0";
  element.style.left = originalPositions[i].left
    ? originalPositions[i].left
    : "0";
  containers[0].appendChild(element);
  elements.push(element);
}

const defaultWidth =
  parseFloat(getComputedStyle(elements[0]).width) / baseFontSize; // 初始宽度

function animate(timestamp) {
  if (!lastTime) lastTime = timestamp;
  const deltaTime = timestamp - lastTime;
  lastTime = timestamp;

  const changeWidth = (speed * deltaTime) / 1000;

  elements.forEach((el, index) => {
    let width = parseFloat(getComputedStyle(el).width) / baseFontSize;
    let positionTop = parseFloat(getComputedStyle(el).top) / baseFontSize;

    width += changeWidth;
    if (width > maxChangeValue) width = defaultWidth;

    positionTop -= changeWidth;

    if (parseInt(timestamp / 2000) % 2 > 0) {
      positionTop = parseInt(originalPositions[index].top);
      el.style.top = positionTop + "%";
    } else {
      el.style.top = positionTop + "rem";
    }
    el.style.width = width + "rem";
    el.style.height = width + "rem";
  });
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);
